<template>
	<view class="app-user-center-top cross-center" :style="{'background-image': 'url('+topPicUrl+')'}">
		<!-- style 3 start -->
		<!-- 头像内嵌 -->
		<view class="style-3 box-grow-1 main-center" v-if="topStyle == '3'">
			<view class="style-3-container dir-left-nowrap cross-center"
				:style="userCenter.style_bg_pic_url?`background-image: url(${userCenter.style_bg_pic_url})`:``">
				<view class="box-grow-0 avatar-container">
					<image :src="avatar"
						:class="[userInfo.is_vip_card_user && is_icon_super_vip == '1' ? 'avatar is_vip' : 'avatar']">
					</image>
					<image v-if="userInfo.is_vip_card_user && is_icon_super_vip == '1'" src="/static/image/vip_icon.png"
						class="vip_icon"></image>
				</view>
				<view class="box-grow-1 info-container">
					<template v-if="isLogin">
						<view class="dir-left-nowrap cross-center">
							<view class="nickname t-omit">{{userInfo.nickname}}</view>
							<!--#ifdef MP-WEIXIN-->
							<!-- <button class="u-refresh dir-left-nowrap main-between cross-center member-margin"
								open-type="getUserInfo" scope="userInfo" @getAuthorize="getUserInfo"
								@getuserinfo="getUserInfo">
								<icon class="u-icon"></icon>
								<text>刷新</text>
							</button> -->
							<!-- #endif-->
						</view>
						<app-form-id @click="goMember" v-if="mall.setting.is_icon_members_grade == 1">
							<view class="member-info inline-flex cross-center dir-left-nowrap">
								<view>
									<image :src="getMemberPicUrl" class="member-icon" mode="aspectFill"></image>
								</view>
								<view class="t-omit">{{userInfo.identity.level_name}}</view>
							</view>
						</app-form-id>
					</template>
					<template v-else>
						<app-form-id>
							<view class="login-btn" @click="callLogin">点击登录</view>
						</app-form-id>
					</template>
				</view>
				<!-- <view class="box-grow-0 address-container">
					<app-jump-button form url="/pages/address/address">
						<view class="address-btn-3">
							<image class="address-btn-icon" src="/static/image/icon/address-gray.png"></image>
							<view>收货地址</view>
						</view>
					</app-jump-button>
				</view> -->
			</view>
		</view>
		<!-- style 3 end -->

		<!-- style 2 start -->
		<!-- 头像居中 -->
		<view class="style-2 box-grow-1" v-else-if="topStyle == '2'">
			<view class="avatar-container">
				<image :src="avatar"
					:class="[userInfo.is_vip_card_user && is_icon_super_vip == '1' ? 'avatar is_vip' : 'avatar']">
				</image>
				<image v-if="userInfo.is_vip_card_user  && is_icon_super_vip == '1'" src="/static/image/vip_icon.png"
					class="vip_icon"></image>
			</view>
			<view class="info-container">
				<template v-if="isLogin">
					<app-form-id @click="goMember" v-if="mall.setting.is_icon_members_grade == 1">
						<view class="member-info inline-flex cross-center dir-left-nowrap">
							<view>
								<image :src="getMemberPicUrl" class="member-icon" mode="aspectFill"></image>
							</view>
							<view class="t-omit">{{userInfo.identity.level_name}}</view>
						</view>
					</app-form-id>
					<view class="dir-left-nowrap cross-center main-center">
						<view class="nickname t-omit"
							:class="[mall.setting.is_icon_members_grade != 1 ? 'no-member-icon' : '',]">
							{{userInfo.nickname}}
						</view>
						<!--#ifdef MP-WEIXIN-->
						<button class="u-refresh dir-left-nowrap main-between cross-center"
							:class="[mall.setting.is_icon_members_grade != 1 ? 'no-member-icon' : '',]"
							open-type="getUserInfo" scope="userInfo" @getAuthorize="getUserInfo"
							@getuserinfo="getUserInfo">
							<icon class="u-icon"></icon>
							<text>刷新</text>
						</button>
						<!-- #endif-->
					</view>
				</template>
				<template v-else>
					<app-form-id>
						<view class="login-btn" @click="callLogin">点击登录</view>
					</app-form-id>
				</template>
			</view>
		</view>
		<!-- style 2 end -->

		<!-- style 1 start -->
		<!-- 头像靠左 -->
		<view class="style-1 dir-left-nowrap cross-center box-grow-1" v-else-if="topStyle == '1'">
			<view class="box-grow-0 avatar-container">
				<image :src="avatar"
					:class="[userInfo.is_vip_card_user && is_icon_super_vip == '1' ? 'avatar is_vip' : 'avatar']">
				</image>
				<image v-if="userInfo.is_vip_card_user && is_icon_super_vip == '1'" src="/static/image/vip_icon.png"
					class="vip_icon"></image>
			</view>
			<view class="box-grow-1 info-container">
				<template v-if="isLogin">
					<view class="dir-left-nowrap cross-center">
						<view class="nickname t-omit">{{userInfo.nickname}}</view>
						<!--#ifdef MP-WEIXIN-->
						<!-- <button class="u-refresh dir-left-nowrap main-between cross-center member-margin"
							open-type="getUserInfo" scope="userInfo" @getAuthorize="getUserInfo"
							@getuserinfo="getUserInfo">
							<icon class="u-icon"></icon>
							<text>刷新</text>
						</button> -->
						<!-- <button class="u-refresh dir-left-nowrap main-between cross-center member-margin"
							@click="getUserInfo">
							<icon class="u-icon"></icon>
							<text>刷新</text>
						</button> -->
						<!-- #endif-->
					</view>
					<view class="dir-bottom-data" @click="goUser">
						个人中心
					</view>
					<!-- <app-form-id @click="goMember" v-if="mall.setting.is_icon_members_grade == 1">
						<view class="member-info inline-flex cross-center dir-left-nowrap">
							<view>
								<image :src="getMemberPicUrl" class="member-icon" mode="aspectFill"></image>
							</view>
							<view class="t-omit">{{userInfo.identity.level_name}}</view>
						</view>
					</app-form-id> -->
				</template>
				<template v-else>
					<app-form-id>
						<view class="login-btn" @click="callLogin">点击登录</view>
					</app-form-id>
				</template>
			</view>
			<!-- <view class="box-grow-0 address-container">
				<app-jump-button form url="/pages/address/address">
					<view class="address-btn-1 dir-left-nowrap cross-center">
						<view>
							<image class="address-btn-icon" src="/static/image/icon/address-white.png"></image>
						</view>
						<view>收货地址</view>
					</view>
				</app-jump-button>
			</view> -->
		</view>
		<!-- style 1 end -->

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';

	export default {
		name: 'app-user-center-top',
		props: {
			topStyle: String,
			topPicUrl: String,
			memberPicUrl: String,
			is_icon_super_vip: {
				type: String,
				default () {
					return '0';
				}
			},
		},
		computed: {
			isLogin() {
				return this.$user.isLogin();
			},
			...mapState({
				mall: state => state.mallConfig.mall,
				userInfo: state => state.user.info,
			}),
			...mapGetters({
				userCenter: 'mallConfig/getUserCenter',
				userInfo: 'user/info',
			}),
			avatar() {
				if (this.isLogin && this.userInfo) {
					return this.userInfo.avatar;
				} else {
					return '/static/image/user-default-avatar.png';
				}
			},
			getMemberPicUrl() {
				return this.memberPicUrl;
				// todo 此处选哪个图标待确认
				if (this.memberPicUrl) {
					return this.memberPicUrl;
				} else {
					return this.userInfo.identity.member_pic_url;
				}
			},
		},
		created() {
			if (this.isLogin) {
				this.$store.dispatch('user/info', {
					refresh: true
				});
			} else {}
		},
		methods: {
			callLogin() {
				this.$store.dispatch('user/accessToken');
			},
			goMember() {
				uni.navigateTo({
					url: '/pages/member/index/index',
				});
			},
			goUser() {
				uni.navigateTo({
					url: '/pages/user-center/personal/personal'
				})
			},
			getUserInfo(userInfoResult) {
				let _this = this;
				/* if(uni.getUserProfile){
					uni.getUserProfile({
						desc:'描述',
						success: (res) => {
							console.log(res);
						}
					})
				} */
				uni.login({
					scopes: 'auth_user',
					success(loginResult) {
						const data = {
							encryptedData: userInfoResult.detail.encryptedData,
							iv: userInfoResult.detail.iv,
							rawData: userInfoResult.detail.rawData,
							signature: userInfoResult.detail.signature,
							code: loginResult.code,
						};
						_this.$request({
							url: _this.$api.passport.login,
							method: 'post',
							data: data
						}).then(response => {
							uni.hideLoading();
							if (response.code === 0) {
								uni.showToast({
									title: '资料已更新',
									icon: 'none'
								});
								uni.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
							} else {
								return reject(response.msg);
							}
						});
					}
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.app-user-center-top {
		width: #{750rpx};
		height: #{436rpx};
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		overflow: hidden;
		position: relative;
	}

	.app-user-center-top::after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		content: '';
		background: rgba(0, 0, 0, 0.2);
	}

	.avatar {
		width: #{132rpx};
		height: #{132rpx};
		border-radius: #{1000rpx};
	}

	.avatar.is_vip {
		border: #{8rpx} solid #ffe993;
	}

	.login-btn {
		display: inline-block;
		padding: #{12rpx} #{24rpx};
		font-size: $uni-font-size-import-one;
		color: #FFFFFF;
	}

	.avatar-container {
		padding: #{24rpx};
		position: relative;
		z-index: 3;
	}

	.style-2 .vip_icon {
		left: 50%;
		margin-left: 29rpx;
	}

	.vip_icon {
		position: absolute;
		right: 0;
		top: 0;
		width: 58rpx;
		height: 57rpx;
	}

	.info-container {
		padding: #{0rpx};
		position: relative;
		z-index: 3;
	}

	.address-container {
		padding: #{24rpx};
	}

	.member-info {
		background: #3c3642;
		color: #fff;
		font-size: $uni-font-size-weak-two;
		padding: #{6rpx} #{12rpx};
		border-radius: #{1000rpx};
		height: #{36rpx};
		line-height: #{36rpx};

		.member-icon {
			display: block;
			width: #{44rpx};
			height: #{44rpx};
			margin-top: -#{6rpx};
			margin-bottom: -#{6rpx};
			margin-left: -#{12rpx};
			margin-right: #{6rpx};
			border-radius: #{1000rpx};
			overflow: hidden;
		}
	}

	.address-btn-3 {
		text-align: center;
		font-size: $uni-font-size-general-two;
		color: $uni-general-color-two;

		.address-btn-icon {
			width: #{56rpx};
			height: #{56rpx};
		}
	}

	.address-btn-1 {
		padding: #{16rpx} #{18rpx};
		border-radius: #{1000rpx} 0 0 #{1000rpx};
		margin-right: -#{48rpx};
		background: #ff4544;
		color: #ffffff;

		.address-btn-icon {
			width: #{44rpx};
			height: #{44rpx};
			margin-right: #{12rpx};
			display: block;
		}
	}

	.style-3 {

		.style-3-container {
			background-color: #fff;
			border-radius: #{12rpx};
			width: #{656rpx};
			height: #{220rpx};
			background-size: 100% 100%;

			.nickname {
				margin-bottom: #{12rpx};
				color: $uni-important-color-black;
			}
		}

		.u-refresh.member-margin {
			margin-bottom: 12upx;
		}
	}

	.style-2 {
		text-align: center;

		.info-container {
			margin-top: -#{50rpx};
		}

		.nickname {
			color: #fff;
		}

		.nickname.no-member-icon {
			margin-top: #{30rpx};
		}

		.u-refresh.no-member-icon {
			margin-top: #{30rpx};
		}

		.login-btn {
			color: #fff;
			margin-top: #{40rpx};
		}
	}

	.style-1 {
		padding: 0 #{24rpx};

		.nickname {
			color: #fff;
			margin-bottom: #{12rpx};
			font-size: 42rpx;
		}

		.u-refresh.member-margin {
			margin-bottom: 12upx;
		}
	}

	.dir-bottom-data {
		font-size: 28rpx;
		color: #FFFFFF;
		border: 1rpx solid #ffffff;
		border-radius: 18rpx;
		width: 180rpx;
		text-align: center;
		padding: 10rpx 20rpx;
	}

	.u-refresh {
		border-radius: 18upx;
		border: 1upx solid #ffffff;
		min-width: 69upx;
		margin: 0 0 0 10upx;
		box-sizing: content-box;
		height: 37upx;
		padding: 0 13upx;
		background-color: transparent;
		transform: rotateZ(360deg);

		.u-icon {
			width: 21upx;
			height: 21upx;
			background-image: url('../../../static/image/icon/refresh.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin-right: 5upx;
		}

		text {
			line-height: 1;
			color: #ffffff;
			font-size: 21upx;
		}
	}
</style>
